<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
  background-color: #324157;
  background-size: cover;
  background-position: center;
  position: relative;
  &-con {
    position: absolute;
    right: 160px;
    top: 50%;
    left: 50%;
    transform: translateY(-60%) translateX(-60%);
    width: 300px;
    &-header {
      font-size: 16px;
      font-weight: 300;
      text-align: center;
      padding: 30px 0;
    }
  }
}
.form-con {
  padding: 10px 0 0;
  cursor: pointer;
}
.form-con img {
  background-color: black;
  opacity: 0.8;
  float: right;
  border-radius: 4px;
}
.checkbox {
  width: 100%;
  height: 32px;
}
</style>
<template>
  <div class="login">
    <!-- <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    ></vue-particles>-->
    <div class="login-con" style="color:white">
      <Card
        shadow="true"
        style="background-color: rgba(50, 65, 87, 0.8);box-shadow: 1px 1px 10px 5px rgba(155, 155, 151, 0.4);"
      >
        <p slot="title" style="text-align: center;color:white;">{{ title }}</p>
        <div class="form-con">
          <Form
            ref="formInline"
            :model="formInline"
            :rules="ruleInline"
            @keydown.enter.native="submit('formInline')"
          >
            <FormItem prop="UserName">
              <Input v-model="formInline.UserName" placeholder="请输用户名">
                <span slot="prepend">
                  <Icon :size="16" type="ios-person"></Icon>
                </span>
              </Input>
            </FormItem>
            <FormItem prop="Password">
              <Input type="password" v-model="formInline.Password" placeholder="请输入密码">
                <span slot="prepend">
                  <Icon :size="14" type="md-lock"></Icon>
                </span>
              </Input>
            </FormItem>
            <!-- <FormItem prop="code">
                            <Input v-model="formInline.code" style="width: 140px;" size="large"></Input>
                            <img :src="imgUrl" @click="getCode">
            </FormItem>-->
            <div class="checkbox">
              <Checkbox v-model="memory" @on-change="changeStatus">记住账号</Checkbox>
            </div>
            <FormItem>
              <Button :loading="btnLoading" @click="submit('formInline')" type="primary" long>登录</Button>
              <!-- <sun></sun> -->
              <!-- <my-loading></my-loading> -->
            </FormItem>
          </Form>
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
// import { checkLogin, getUserInfo } from "../api/user";
// import myLoading from "./components/myLoading.vue";
// import sun from "./components/sun.vue";
export default {
  components: {
    // myLoading,
    // sun,
  },
  data() {
    return {
      memory: false,
      imgUrl: "",
      formInline: {
        UserName: "",
        Password: "",
        code: "",
        timestamp: "",
      },
      ruleInline: {
        UserName: [
          { required: true, message: "请填写用户名", trigger: "blur" },
        ],
        Password: [{ required: true, message: "请填写密码", trigger: "blur" }],
        // code: [
        //     { required: true, message: '请填写验证码', trigger: 'blur' }
        // ]
      },
      title: "",
      btnLoading: false,
      timetamp: "",
    };
  },
  methods: {
    getCode() {
      this.formInline.code = "";
      this.formInline.timestamp =
        sessionStorage.getItem("timestamp") || new Date().getTime();
      sessionStorage.setItem("timestamp", this.formInline.timestamp);
      this.imgUrl = `${this.util.baseUrl}/adminuser/getCode?timestamp=${
        this.formInline.timestamp
      }&time=${new Date().getTime()}`;
    },
    changeStatus(value) {
      this.memory = value;
      localStorage.setItem("memory", value);
    },
    submit(name) {
      this.$refs[name].validate((valid) => {
        if (!valid) {
          return this.$Message.error("请填写完整！");
        }
        if(this.formInline.UserName == "admin" && this.formInline.Password == "123456"){
            sessionStorage.setItem("Menus", JSON.stringify([1, 2]));
            this.$router.push("/info");
        }else{
            this.$Message.error("用户名或密码错误")
        }
        // this.btnLoading = true;
        // checkLogin(this.formInline).then((data) => {
        //   this.btnLoading = false;
        //   if (data.Code == 0) {
        //     localStorage.setItem("UserName", this.formInline.UserName);
        //     sessionStorage.setItem("Menus", JSON.stringify(data.Data.Menus));
        //     sessionStorage.setItem("NickName", data.Data.User.Role.Name);

            // sessionStorage.setItem('roleList',JSON.stringify(data.roleList));
            // sessionStorage.setItem('userInfo',JSON.stringify(data.userInfo));
            // sessionStorage.setItem("Menus", JSON.stringify([1, 2]));
            // this.$router.push("/info");
          // }
        // });
      });
    },
  },
  mounted() {
    let memory = localStorage.getItem("memory");
    let UserName = localStorage.getItem("UserName");
    if (UserName && memory == "true") {
      this.formInline.UserName = UserName;
      this.memory = true;
    }
    this.title = `欢迎登录${this.util.platform}运维系统`;
    this.getCode();
  },
};
</script>
